<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注 册</title>
    <link rel="icon" href="../images/favicon.ico">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/layuimini.css?v=2.0.1" media="all">
    <link rel="stylesheet" href="../css/themes/default.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <link rel="stylesheet" href="../js/lay-module/step-lay/step.css" media="all">
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <style>
        .layuimini-main {
            top:50%;left:50%;position:absolute;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);overflow:hidden;
            width: 30%;
            opacity: 0.9;
            font-size: 14px;
        }
        body {background:url(../images/loginbg.png) 0% 0% / cover no-repeat;position:static;font-size:12px;height: 120px}
    </style>
</head>
<body>
<div class="layuimini-main">
    <div class="layui-card">
        <div class="layui-card-header">信息注册</div>
        <div class="layui-card-body">
            <div class="layui-form ">
                <div class="layui-form-item">
                    <label class="layui-form-label required">家 庭 昵 称</label>
                    <div class="layui-input-block">
                        <input type="text" name="familyName" lay-verify="required" lay-reqtext="家庭昵称不能为空" placeholder="请输入家庭昵称" value="" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label required">帐 号</label>
                    <div class="layui-input-block">
                        <input type="text" name="account" lay-verify="required|account" lay-reqtext="帐号不能为空" placeholder="请输入注册帐号" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">密 码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" lay-verify="required|pass" lay-reqtext="密码不能为空" placeholder="请输入帐号密码" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">姓 名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" lay-reqtext="姓名不能为空" placeholder="请输入个人姓名" value="" class="layui-input">
                        <input type="hidden" name="type"  value="0" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">年 龄</label>
                    <div class="layui-input-block">
                        <input type="number" name="age" lay-verify="required|age" lay-reqtext="年龄不能为空" placeholder="请输入年龄" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">性 别</label>
                    <div class="layui-input-block">
                        <input type="radio" name="gender" value="1" title="男" checked="checked">
                        <input type="radio" name="gender" value="0" title="女">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal back" >返回</button>
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script>
    layui.use(['form', 'axios'], function () {
        var form = layui.form,
            layer = layui.layer,
            axios = layui.axios,
            $ = layui.$;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.verify({
            account: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            }

            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,age: function (value, item) {
                if (value <= 0 || value > 150){
                    return "年龄数值不合理";
                }
            }
        });
        form.render();

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;

        $('.back').on('click', function () {
            window.location.href='./login.html';
        })

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            console.log(data.field);
            axios({
                method: 'post',
                url: '/register',
                data: data.field
            }).then(response => {
                if (response.code === 0){
                    layer.msg(response.msg, ()=>{
                        window.location = 'login.html';
                    })
                }
            }).catch(error => {
                layer.msg(error)
            })


            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {

                // 关闭弹出层
                layer.close(index);
                layer.close(parentIndex);

            });


            return false;
        });
    });
</script>
</body>
</html>



